import { LoadingOutlined } from "@ant-design/icons";
import { Flex, Space, Drawer, Spin, Typography, Button } from "antd";
import React, { useCallback, useMemo, useState } from "react"
import styled from "styled-components";

const HolderWrap = styled.div`
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
`

const DownloadDrawer = ({ complateCount, bookName, active, filePath }) => {

    const [open, setOpen] = useState(false);
    const started = useMemo(() => !!(complateCount.success || complateCount.fail), [complateCount])
    const handleOpenFolder = useCallback(() => {
        if (!filePath) return;
        window.electron.openFolder(filePath)
    }, [filePath])
    return <>
        <HolderWrap onClick={() => setOpen(true)}>
            <svg width={12} height={56} viewBox="0 0 12 56" xmlns="http://www.w3.org/2000/svg">
                <path d="m3.86950483 4.06524758 8.13049517-4.06524758v56l-8.13049517-4.0652476c-2.3714882-1.1857441-3.86950483-3.6095859-3.86950483-6.2609903v-35.3475242c0-2.65140439 1.49801663-5.07524622 3.86950483-6.26099032z" fill="#1e293b" fillRule="evenodd" transform="matrix(-1 0 0 1 12 0)" />
                <path d="m4,24L8,28L4,32" stroke="#fff" strokeWidth={1.5} fill="transparent" />
            </svg>
        </HolderWrap>
        <Drawer
            title="下载列表"
            placement='left'
            autoFocus={false}
            closable={false}
            onClose={() => setOpen(false)}
            open={open}
            key='left'
        >
            {!started && <Typography.Text>暂未开始下载</Typography.Text>}
            {

            }
            {started && <Space direction="vertical">
                <Typography.Text type='success'>success count: {complateCount.success}</Typography.Text>
                <Typography.Text type='danger'>fail count: {complateCount.fail}</Typography.Text>
                {active && <Flex align="center" gap={5}>
                    <Spin indicator={<LoadingOutlined style={{ color: '#f59e0b' }} spin />} size="small" />
                    <Typography.Text style={{ color: '#f59e0b' }}>{active} downloading...</Typography.Text>
                </Flex>}
                {
                    bookName && <Flex justify="space-between" align="center">
                        <Typography.Text type='success'>{bookName} 下载完成</Typography.Text>
                        <Button type="text" onClick={handleOpenFolder}>打开文件所在位置</Button>
                    </Flex>
                }
            </Space>}
        </Drawer>
    </>
}

export default DownloadDrawer;